<template>
  <a-form-model-item :label="label" :prop="prop" :ref="prop" :labelCol="labelCol" :wrapperCol="wrapperCol"
    class="form-item" :style="'width: ' + formItemWidth">
    <slot>
      <template v-if="inputType === 'input'">
        <a-input :placeholder="'请输入' + label" :max-length="maxLength" @input="handlerInput" v-model="localValue"
          :disabled="disabledByOperationType()" />
      </template>
      <template v-else-if="inputType === 'textarea'">
        <a-textarea :placeholder="'请输入' + label" @input="handlerInput" v-model="localValue"
          :disabled="disabledByOperationType()" />
      </template>
      <template v-else-if="inputType === 'select'">
        <a-select :placeholder="'请选择' + label" @change="handlerChange" v-model="localValue" :showSearch="showSearch"
          :getPopupContainer="triggerNode => { return triggerNode.parentNode }" :filterOption="false"
          :disabled="disabledByOperationType()" @search="handlerSearch" @focus="handleFocus">
          <template v-if="options">
            <a-spin v-if="showSearch && fetching" slot="notFoundContent" size="small" />
            <a-select-option v-for="i in options" :key="i[optionsValue]" :value="i[optionsValue]">{{ i[optionsLabel] }}
            </a-select-option>
          </template>
        </a-select>
      </template>
      <template v-else-if="inputType === 'checkbox'">
        <template v-if="options">
          <a-checkbox-group class="check-box-group" v-model="localValue" :options="options"
            :disabled="disabledByOperationType()" @change="handlerChange"></a-checkbox-group>
        </template>
        <template v-else>
          <a-checkbox v-model="localValue" :disabled="disabledByOperationType()" @change="handlerChange"></a-checkbox>
        </template>
      </template>
      <template v-else-if="inputType === 'datepicker'">
        <template>
          <a-date-picker v-model="localValue" :mode="mode" :showTime="mode === 'time' || showTime" :format="dateFormat"
            :options="options" :disabled="disabledByOperationType()" @change="handlerChange"
            :disabledDate="disabledDate" :disabledTime="disabledTime" />
        </template>
      </template>
      <template v-else-if="inputType === 'radioGroup'">
        <a-radio-group v-model="localValue" :options="options" :disabled="disabledByOperationType()"
          @change="handlerChange">
        </a-radio-group>
      </template>
      <template v-else-if="inputType === 'transfer'">
        <a-transfer :data-source="dataSource" show-search :filter-option="filterOption" :target-keys="targetKeys"
          :render="(item) => item.title" @change="transferChange" @search="handlerSearch"
          :disabled="disabled || operatorType === 'view' || operatorType === 'delete' || operatorType === 'cancel'" />
      </template>
      <template v-else-if="inputType === 'cascader'">
        <a-cascader :options="options" :load-data="loadData" placeholder="请选择" v-model="localValue"
          :disabled="disabledByOperationType()" change-on-select :show-search="showSearch" @change="handlerChange" />
      </template>
      <template v-else-if="inputType === 'timePicker'">
        <a-time-picker :open.sync="open" :disabledTime="disabledTime">
          <a-button slot="addon" size="small" type="primary" @click="handleClose">确认</a-button>
        </a-time-picker>
      </template>
    </slot>
  </a-form-model-item>
</template>

<script>
import { operationType as OT } from '../../../utils/enum'
export default {
  name: "formItem",
  inject: ["entityViewInstance"],
  props: {
    wrapperCol: Object,
    labelCol: Object,
    label: String,
    prop: String,
    maxLength: Number,
    inputType: {
      type: String,
      default: "input",
    },
    options: {
      type: Array,
    },
    optionsValue: {
      type: String,
      default: "value",
    },
    optionsLabel: {
      type: String,
      default: "name",
    },
    dataSource: {
      type: Array,
    },
    targetKeys: {
      type: Array,
    },
    showSearch: Boolean,
    fetching: Boolean,
    value: {},
    disabled: Boolean,
    dateFormat: {
      type: String,
      default: "YYYYMMDD"
    },
    mode: String,
    showTime: Boolean,
    open: Boolean,
    loadData: Function,
    valid: Boolean,
    disabledDate: Function,
    disabledTime: Function,
  },
  watch: {
    value(val) {
      this.localValue = val;
    },
  },
  computed: {
    operatorType() {
      return this.entityViewInstance
        ? this.entityViewInstance.operatorType
        : "";
    },
    formItemWidth() {
      return this.entityViewInstance
        ? this.entityViewInstance.formItemWidth
        : "50%";
    },
  },
  data: function () {
    return {
      localValue: this.value,
    };
  },
  methods: {
    handlerInput() {
      this.$emit("input", this.localValue);
    },
    handlerChange() {
      this.$emit("input", this.localValue);
      this.$emit("change", this.localValue);
    },
    handlerSearch() {
      this.$emit("search", ...arguments);
    },
    handleFocus() {
      this.$emit("focus", ...arguments);
      this.$emit("search", ...arguments);
    },
    filterOption(inputValue, option) {
      return option.title.indexOf(inputValue) > -1;
    },
    handleClose() {
      this.open = false;
    },
    transferChange() {
      this.$emit("change", ...arguments);
    },
    disabledByOperationType() {
      if (!this.valid) {
        return this.disabled ||
          this.operatorType === OT.VIEW ||
          this.operatorType === OT.DELETE ||
          this.operatorType === OT.STOP ||
          this.operatorType === OT.CANCEL ||
          this.operatorType === OT.USE ||
          this.operatorType === OT.CHECK ||
          this.operatorType === OT.CHECK_VIEW
      } else {
        return this.disabled
      }

    },
    onFieldBlur() {
      this.entityViewInstance.validateField(this.prop, ...arguments);
    }
  },
  mounted() {
  },
};
</script>

<style lang="less" scoped>
.form-item {
  width: 50%;
  padding-left: 10px;
  padding-right: 10px;
}

/deep/ .check-box-group,
/deep/.ant-checkbox-group-item {
  margin: 4px 0;
  min-width: 33.33%;

}
</style>
